<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>参加考试</title>
    <link rel="stylesheet" href="/css/front/exam.css">
    <script src="../../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="option">
    <div class="float-left">
        <span>当前位置 -> 参加考试</span>
    </div>
    <div class="float-right">
        <span id="currentDate"></span>
    </div>
</div>
<hr>
<div id="examList" class="exam-list">
</div>
<script>
    $(function () {
        $.ajax({
            url:"/ExamControl/getAllExam",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            type:"post",
            success:function (data) {
                data = data[0].data;
                let html="<ul>";
                for(let i=0;i<data.length;i++){
                    html +="<li class='center'>"+
                        data[i].examPaperName+
                        " 科目："+data[i].examPaperType+
                        " 出卷人："+data[i].examPaperAuthor+
                        " 开考时间：<span id=\"startTime\">"+data[i].examStartTime+"</span>"+
                        " 考试时长："+data[i].examPaperTime;
                    //当前时间比对考试时间
                    let flag = (new Date()-new Date(data[i].examStartTime))/1000/60;
                    //根据时间显示按钮text
                    html+=htmlFlag(flag,data[i]);
                }
                html +="</ul>"
                $("#examList").html(html);
            }
        });
        init();
    });

    // 初始化方法
    function init(){
        getCurrentDate();
        window.setInterval("getCurrentDate()",1000);
    }

    // 计时器
    function getCurrentDate() {
        let myDate = new Date;
        let year = myDate.getFullYear(); //获取当前年
        let mon = myDate.getMonth() + 1; //获取当前月
        let date = myDate.getDate(); //获取当前日
        let h = myDate.getHours();//获取当前小时数(0-23)
        let m = myDate.getMinutes();//获取当前分钟数(0-59)
        let s = myDate.getSeconds();//获取当前秒
        let time = year +"-"+mon+"-"+date+" "+h+":"+m+":"+s;
        $("#currentDate").html(time);
    }

    // $("button").click(function () {
    //     $.ajax({
    //         url: "/ExamControl/getExamPaper",
    //         data: {
    //             "id": 1
    //         },
    //         type: "post",
    //         dataType: "json",
    //         success: function (data) {
    //             console.log(data);
    //         }
    //     })
    // });

    // 进入考试方法
     function toExam(button) {
         let value = $(button).text();
        console.log(value);
        if (value=="入场结束"){
            alert('考试已开考但入场结束!');
        }else if(value=="迟到入场"){
            alert("考试已开考但仍可入场");
        }else if(value=="考前入 场"){
            alert("考试未开考但已可入场");
        }else if(value=="考场未开放") {
            alert("距离开考30分钟以上，考场未开放");
        }else if(value=="考试结束"){
            alert("考试已结束");
        }else {
            alert("出现未知错误！");
        }
    }

    //根据value显示按钮text
    function buttonValue(value) {
        return "<button onclick='toExam(this)' class=\"float-right\">"+value+"</button>";
    }
    //根据flag生成html
    function htmlFlag(flag,data) {
        if(flag>30){
            if(data.examPaperTime*60<flag){
                return buttonValue("考试结束");
            }else{
                return buttonValue("入场结束");
            }
        }else if(flag>=0 && flag<=30){
            return buttonValue("迟到入场");
        }else if(flag>=-30 && flag<0){
            return buttonValue("考前入场");
        }else{
            return buttonValue("考场未开放");
        }
    }
</script>
</body>
</html>